<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript轮播图</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .slide {
        position: relative;
        top: 20px;
        left: 20px;
        width: 800px;
        overflow: hidden;
      }
      .slide-box {
        /* 6张图加上尾部多余的图，一共7张图，7*800 */
        width: 5600px;
        height: 400px;
        /* 用来清除图片之间的空隙 */
        font-size: 0;
      }
      .slide img {
        width: 800px;
        display: inline-block;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <!-- 视窗容器 -->
    <div class="slide">
      <!-- 滚动容器 -->
      <div class="slide-box">
        <img src="img/1.jpeg" />
        <img src="img/2.jpeg" />
        <img src="img/3.jpeg" />
        <img src="img/4.jpeg" />
        <img src="img/5.jpeg" />
        <img src="img/6.jpeg" />
        <!-- 末尾增加一个和开头一样的图片，用来利用视觉差实现无线滚动 -->
        <img src="img/1.jpeg" />
      </div>
    </div>
  </body>
</html>
<script>
  const Slide = (selector) => {
    // 根据选择器获得元素
    const $el = document.querySelector(selector);
    // 获取元素宽度，slide每次滚动这个元素的宽
    const width = $el.getBoundingClientRect().width;
    // 获取滚动容器，约定滚动容器有个slide-box的class
    const $scrollEl = $el.querySelector(".slide-box");
    // 获取滚动容器的宽
    const scrollWidth = $scrollEl.getBoundingClientRect().width;
    // 记录滚动距离
    let scrollLeft = 0;
    // 滚动时间间距
    let scrollInterval = 2000;
    // 滚动方法
    const _scroll = () => {
      scrollLeft += width;

      // 如果滚动过了最后一张，那么去掉transtion动画并重置
      if (scrollLeft == scrollWidth) {
        scrollLeft = 0;
        $scrollEl.style.transition = "0s";
        $scrollEl.style.transform = `translate3d(-${scrollLeft}px, 0 ,0)`;
        // 上面的代码执行后，滚动距离回到了0，视觉上还是第一张图，那么继续滚动到下一张
        scrollLeft += width;
      }

      // 加一个setTimeout，否则这里的transition和上面的冲突，导致上面的不生效
      setTimeout(() => {
        $scrollEl.style.transition = "1s";
        $scrollEl.style.transform = `translate3d(-${scrollLeft}px, 0 ,0)`;
      });
    };

    // 增加一个滚动标记，当鼠标移上去时候暂停动画来看美女，移除时候继续动画
    let flag = true;
    setInterval(() => {
      if (flag) {
        _scroll();
      }
    }, scrollInterval);

    $el.addEventListener("mouseover", () => (flag = false));
    $el.addEventListener("mouseout", () => (flag = true));
  };
  Slide(".slide");
</script>
